<template>
	<div>
		<!-- pc端 -->
		<div class="user_sing_pc" style="height: 100%;">
			<main id="mainPage" class="mainPage_pc_main_194P4">
				<div class="login">
					<div class="login-content clearfix">
						<div class="login-content-img pull-left">
							<img src="@/assets/image/JPY.jpg" width="497" height="593" alt="Alternate Text">
						</div>
						<div class="login-content-form pull-right">
							<div style="text-align:left" class="login-content-form-title">
								{{$t('profile.SignIn')}}
							</div>

							<fb-signin-button :params="fbSignInParams" @success="facebookSuccess"
								@error="facebookError">
								<button class="fbBtnBox van-button van-button--default van-button--normal"
									style="width: 100%; color: rgb(255, 255, 255); background: rgb(60, 90, 154); border-color: rgb(60, 90, 154);"><span
										class="van-button__text">
										<span class="fb-logo">
											<svg t="1577949242844" viewBox="0 0 1024 1024" version="1.1"
												xmlns="http://www.w3.org/2000/svg" p-id="3541" width="30" height="30"
												class="icon">
												<path
													d="M786.285714 73.142857q68 0 116.285715 48.285714T950.857143 237.714286v548.571428q0 68-48.285714 116.285715T786.285714 950.857143h-107.428571v-340h113.714286l17.142857-132.571429h-130.857143V393.714286q0-32 13.428571-48t52.285715-16l69.714285-0.571429V210.857143q-36-5.142857-101.714285-5.142857-77.714286 0-124.285715 45.714285T541.714286 380.571429v97.714285H427.428571v132.571429h114.285715v340H237.714286q-68 0-116.285715-48.285714T73.142857 786.285714V237.714286q0-68 48.285714-116.285715T237.714286 73.142857h548.571428z"
													p-id="3542" data-spm-anchor-id="a313x.7781069.0.i9" fill="#ffffff">
												</path>
											</svg></span>
										<span class="fb-btnText">{{$t('profile.Face')}}</span>
									</span>
								</button>
							</fb-signin-button>
							<g-signin-button :params="googleSignInParams" @success="googleLoginSuccess"
								@error="googleLoginError">
								<button class="fbBtnBox van-button van-button--default van-button--normal"
									style="margin-top: 20px; width: 100%; color: rgb(255, 255, 255); background: rgb(221, 75, 57); border-color: rgb(221, 75, 57);"><span
										class="van-button__text"><span class="fb-logo"><svg t="1577949242844"
												viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
												p-id="3541" width="30" height="30" class="icon">
												<path
													d="M680.97024 343.06048A238.26432 238.26432 0 0 0 512 273.05984c-131.93216 0-238.92992 106.97728-238.92992 238.92992S380.06784 750.94016 512 750.94016c120.29952 0 219.5968-89.05728 236.19584-204.81024H512v-68.27008h307.2v34.12992a313.1392 313.1392 0 0 1-1.9968 34.14016C800.2048 699.74016 670.12608 819.21024 512 819.21024c-169.66656 0-307.2-137.53344-307.2-307.22048 0-169.64608 137.53344-307.2 307.2-307.2 84.82816 0 161.62816 34.39616 217.23136 89.99936l-48.26112 48.27136z"
													p-id="2677" data-spm-anchor-id="a313x.7781069.0.i9" fill="#ffffff">
												</path>
											</svg></span>
										<span class="fb-btnText">
											{{$t('profile.Google')}}
										</span>
									</span>
								</button>
							</g-signin-button>
							<line-login-button ref='LineLoginButton' :params='LineSignInParams'
								@success="lineLoginSuccess" @error='lineLoginError'>
								<van-button type="default" class="fbBtnBox"
									style="margin-top: 20px; width: 100%; color: #FFFFFF; background: #00C300; ">
									<span class="fb-logo">
										<svg t="1619404074176" class="icon" viewBox="0 0 1024 1024" version="1.1"
											xmlns="http://www.w3.org/2000/svg" p-id="1142" width="30" height="30">
											<path
												d="M0 512C0 229.226667 229.226667 0 512 0s512 229.226667 512 512-229.226667 512-512 512S0 794.773333 0 512z"
												fill="#00C300" p-id="1143"></path>
											<path
												d="M520.533333 238.933333c-174.08 0-315.733333 114.112-315.733333 254.378667 0 125.738667 112.32 231.04 264.042667 250.965333 10.304 2.197333 24.277333 6.72 27.818666 15.445334 3.2 7.936 2.090667 20.352 1.024 28.352l-4.501333 26.837333c-1.365333 7.914667-6.336 30.976 27.349333 16.896 33.706667-14.101333 181.824-106.304 248.064-181.994667 45.76-49.813333 67.669333-100.373333 67.669334-156.501333 0-140.266667-141.632-254.378667-315.733334-254.378667z"
												fill="#FFFFFF" p-id="1144"></path>
											<path
												d="M432.768 426.666667a6.186667 6.186667 0 0 0-6.101333 6.293333v141.013333a6.186667 6.186667 0 0 0 6.101333 6.293334h21.930667a6.186667 6.186667 0 0 0 6.101333-6.293334v-141.013333a6.186667 6.186667 0 0 0-6.101333-6.293333h-21.930667zM607.978667 426.666667h-23.082667a6.357333 6.357333 0 0 0-6.421333 6.293333v83.776l-65.749334-87.274667a6.72 6.72 0 0 0-0.512-0.64l-0.042666-0.042666-0.384-0.384-0.106667-0.106667-0.341333-0.277333-0.170667-0.128-0.341333-0.213334-0.192-0.128-0.341334-0.192-0.192-0.085333a2.858667 2.858667 0 0 0-0.384-0.149333l-0.192-0.085334a2.56 2.56 0 0 0-0.384-0.106666l-0.234666-0.064-0.362667-0.085334-0.277333-0.042666-0.341334-0.042667h-0.32L507.370667 426.666667h-23.082667a6.357333 6.357333 0 0 0-6.421333 6.293333v141.013333c0 3.477333 2.88 6.293333 6.421333 6.293334h23.082667a6.357333 6.357333 0 0 0 6.421333-6.293334v-83.754666l65.834667 87.381333c0.469333 0.64 1.024 1.152 1.642666 1.557333l0.064 0.064 0.384 0.234667 0.192 0.085333 0.298667 0.149334 0.32 0.128 0.192 0.064a3.392 3.392 0 0 0 0.426667 0.149333l0.106666 0.021333c0.512 0.128 1.066667 0.213333 1.642667 0.213334h23.082667a6.357333 6.357333 0 0 0 6.421333-6.293334v-141.013333a6.357333 6.357333 0 0 0-6.421333-6.293333zM403.370667 544.96h-61.162667v-112a6.272 6.272 0 0 0-6.250667-6.293333h-22.506666a6.272 6.272 0 0 0-6.250667 6.293333v141.013333c0 1.685333 0.661333 3.221333 1.749333 4.352l0.085334 0.085334 0.085333 0.085333a6.122667 6.122667 0 0 0 4.330667 1.770667h89.92a6.272 6.272 0 0 0 6.229333-6.314667V551.253333a6.272 6.272 0 0 0-6.229333-6.293333zM727.637333 461.973333a6.272 6.272 0 0 0 6.229334-6.293333v-22.698667a6.272 6.272 0 0 0-6.229334-6.314666h-89.941333a6.229333 6.229333 0 0 0-4.330667 1.770666l-0.064 0.085334-0.106666 0.106666a6.272 6.272 0 0 0-1.728 4.330667v141.013333c0 1.685333 0.661333 3.221333 1.749333 4.352l0.085333 0.085334 0.085334 0.085333a6.208 6.208 0 0 0 4.309333 1.770667h89.941333a6.272 6.272 0 0 0 6.229334-6.293334V551.253333a6.272 6.272 0 0 0-6.229334-6.293333h-61.162666v-23.850667h61.162666a6.272 6.272 0 0 0 6.229334-6.293333v-22.698667a6.272 6.272 0 0 0-6.229334-6.314666h-61.162666v-23.829334h61.162666z"
												fill="#00B900" p-id="1145"></path>
										</svg>
									</span>
									<span class="fb-btnText">
										{{$t('profile.Line')}}
									</span>
								</van-button>
							</line-login-button>
							<p class="small">{{$t('profile.permission')}}</p>
							<div class="line-wrapper clearfix">
								<div class="line"></div>
								<div class="line-or">{{$t('profile.or')}}</div>
								<div class="line"></div>
							</div>



							<!-- 登录功能 -->
							<el-form style="text-align: left;" ref="loginForm" :model="form" :rules="rules"
								label-width="0px" class="login-box">
								<!-- <h3 class="login-title">欢迎登录</h3> -->
								<el-form-item prop="username" :rules="[
							{ required: true, message: $t('login.inputEmail'), trigger: 'blur' },
							{ type: 'email', message:  $t('login.Pleaseenteremail') , trigger: ['blur', 'change'] }
								]">
									<el-input type="text" :placeholder="$i18n.locale == 'en-US' ? 'email' : '電子メールボックス'"
										v-model="form.username" />
								</el-form-item>
								<el-form-item prop="password">
									<el-input type="password"
										:placeholder="$i18n.locale == 'en-US' ? 'password' : '入力されたパスワード'"
										v-model="form.password" />
								</el-form-item>
								<el-checkbox v-model="checked">{{$t('profile.Keep')}}</el-checkbox>
								<el-form-item>
									<div type="primary" @click="signChange" class="submit-btn">
										{{$t('profile.SignIn')}}
									</div>
								</el-form-item>
							</el-form>

							<el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
								<div :class='dialogVisible'></div>
							</el-dialog>
							<!-- 登录功能 -->



							<!-- <div  class="submit-btn"> Sign In </div> -->
							<a @click="changeIiShowTrue" class="form_a" href="javascript:;">
								<p class="forget">{{$t('profile.ForgetPassword')}}</p>
							</a>
							<p class="join-in">{{$t('profile.Notmember')}} <a @click="changesignUp()" class="form_a"
									href="javascript:;"><span style="color:#ff5900">{{$t('profile.SignUp')}}</span></a>
							</p>
						</div>

					</div>



				</div>
				<myfooter></myfooter>
			</main>
		</div>
		<!-- 忘记密码弹框 -->
		<van-popup v-model="changeDeletaIiShow">
			<div class="forget-pass">
				<div class="pc-dialog-slot">
					<div class="delete-icon" @click="changeDeletaIiShow = false"><i></i></div>
					<div class="dialog-content">
						<div class="forget-content">
							<p class="color-yellow">
								{{$t('login.ForgetYourPassword')}}
							</p>
							<p style="color: rgb(117, 117, 117);">
								{{$t('login.resetTip')}}
							</p>

							<el-form id="el-form-forgot" style="text-align: left;" ref="ForgotForm" :model="ForgotForm"
								:rules="Forgotrules" label-width="0px" class="login-box">
								<el-form-item prop="Forgot">
									<el-input ref="emailnew" type="text" :placeholder="$t('login.inputEmail')"
										v-model="ForgotForm.Forgot" />
								</el-form-item>
								<el-form-item prop="newPassword">
									<el-input ref="passwardnew" type="text" :placeholder="$t('login.NewPassword')"
										v-model="ForgotForm.newPassword" />
								</el-form-item>
								<el-form-item style="width:55%;" prop="VerificationCode">
									<el-input type="text" ref="yzmValue" id="last-white"
										:placeholder="$t('login.inputemailcode')" v-model="ForgotForm.VerificationCode">
									</el-input>
									<div class="sendPass van-multi-ellipsis--l2"
										@click="sendEmailCode(ForgotForm.Forgot)">
										{{$t('login.Sendcodetoemail')}}
									</div>
								</el-form-item>
							</el-form>

							<button class="forget-btn bg-yellow" @click="ForgotPasswordSubmit">
								{{$t('application.submit')}}
							</button>
						</div>
					</div>
				</div>
			</div>
		</van-popup>
		<!-- 移动端 -->
		<div class="user_sing_iphone">
			<main>
				<div class="login-body">
					<div class="logo"><img src="../assets/image/logo.png">
						<!---->
						<div v-show="doctor" class="sub-title">
							<van-icon name="question-o" color="#51be8e" />
							<span>￥500{{$t('login.NewUserBonus')}}</span>
						</div>
					</div>
					<div class="van-tabs van-tabs--line">
						<van-tabs @change="titleChange01" v-model="active">
							<!-- Sign In ..................... -->
							<van-tab title="Sign In">
								<div v-show="true">
									<div class="container">
										<div class="login-form">
											<div class="error-msg">
												<span style="display: none;"></span>
											</div>
											<van-form ref='mbRefLoginForm'>
												<van-field class="van-form-item  login-field"
													v-model="mbLoginForm.username" left-icon="youxiang"
													icon-prefix='iconfont' name="Email" :placeholder="$t('login.inputEmail')"
													:rules="[{ required: true, message: $t('login.PleaseinputEmail'),validator }]" />
												<van-field class="van-form-item login-field"
													v-model="mbLoginForm.password" left-icon="suo" type="password"
													icon-prefix='iconfont' name="password" :placeholder="$t('login.inputpassword')"
													:rules="[{ required: true, message:$t('login.Pleaseinputpassword') ,validator}]" />
												<van-field name="checkbox">
													<template #input>
														<van-checkbox v-model="checkbox" class="van-checkbox__label"
															shape="square" checked-color="#ff5900!important">
															{{$t('login.offsetEmail')}}
														</van-checkbox>
													</template>
												</van-field>
											</van-form>
										</div>
										<div class="forget">
											<span style="" @click="changeDeletaIiShow = true">
												{{$t('profile.ForgetPassword')}}
											</span>
										</div><button class="sign-in" @click="mbSignChange"> {{$t('common.Signin')}}
										</button>
										<div role="separator"
											class="van-divider van-divider--hairline van-divider--content-center"
											style="margin: 0.3rem 0px;">or</div>
										<div class="fb-signin-button">

											<fb-signin-button :params="fbSignInParams" @success="facebookSuccess"
												@error="facebookError">
												<button
													class="fbBtnBox van-button van-button--default van-button--normal"
													style="color: rgb(255, 255, 255); background: rgb(60, 90, 154); border-color: rgb(60, 90, 154);"><span
														class="van-button__text">
														<span class="fb-logo">
															<img src="../assets/image/home/facebook.png" alt=""></span>
														<span class="fb-btnText">Facebook</span>
													</span>
												</button>
											</fb-signin-button>
										</div>

										<g-signin-button :params="googleSignInParams" @success="googleLoginSuccess"
											@error="googleLoginError">
											<button
												class="gpBtnBox van-button van-button--default van-button--normal van-button--plain"
												style="color: rgb(255, 255, 255); border-color: rgb(255, 255, 255);"><span
													class="van-button__text">
													<span class="fb-logo">
														<img src="../assets/image/home/google.jpg" alt="">
													</span>
													<span class="gp-btnText">
														Google
													</span>
												</span>
											</button>
										</g-signin-button>
										<line-login-button :params='LineSignInParams' @success="lineLoginSuccess"
											@error='lineLoginError'>
											<van-button type="default" class="gpBtnBox"
												style="color: #FFFFFF; background: #00C300; ">
												<span class="fb-logo" style="top: 0;left: 4.8rem;">
													<img src="../assets/image/Line-logo.png" alt=""
														style="height: 1.9rem;">
												</span>
												<span class="fb-btnText" style="font-weight: 600;">
													Line
												</span>
											</van-button>
										</line-login-button>
										<div class="footer">
											<span>{{$t('login.tip1')}}</span><span
												class="light">{{$t('login.tip2')}}</span>
											<span>{{$t('login.tip6')}} {{$t('login.tip3')}}</span>
											<span class="light">{{$t('login.tip4')}} </span>
											<span>. {{$t('login.tip1')}}</span>
											<a href="https://policies.google.com/privacy" target="_blank" class="light">
												{{$t('login.tip5')}}</a>
											<span>{{$t('login.tip6')}}</span>
											<a href="https://policies.google.com/terms" target="_blank" class="light">
												{{$t('login.tip7')}} </a>
											<span>{{$t('login.tip8')}}</span>
										</div>
									</div>
								</div>
							</van-tab>

							<!-- Sign Up..................... -->
							<van-tab title="Sign Up">
								<div v-show="true">
									<div class="container">
										<div class="login-form">
											<div class="error-msg">
												<span style="display: none;"></span>
											</div>

											<van-form ref='mbRefRegistrationForm'>
												<van-field class="van-form-item  login-field"
													v-model="mbRegistrationForm.email" left-icon="youxiang"
													icon-prefix='iconfont' name="Email"
													:placeholder="$t('login.inputEmail')"
													:rules="[{ required: true, message: $t('login.PleaseinputEmail') ,validator }]" />
												<van-field class="van-form-item login-field"
													v-model="mbRegistrationForm.password" left-icon="suo"
													type="password" icon-prefix='iconfont' name="password"
													:placeholder="$t('login.inputpassword')"
													:rules="[{ required: true, message: $t('login.Pleaseinputpassword')  ,validator}]" />
												<van-field class="van-form-item login-field"
													v-model="mbRegistrationForm.password_confirm" left-icon="querenmima"
													type="password" icon-prefix='iconfont'
													name=" input password_confirm"
													:placeholder="$t('login.inputpassword_confirm')"
													:rules="[{ required: true, message: $t('login.Pleaseinputpassword_confirm')  ,validator:twoPassword}]" />
												<van-field name="checkbox">
													<template #input>
														<van-checkbox v-model="checkbox" class="van-checkbox__label"
															shape="square" checked-color="#ff5900!important">
															{{$t('login.offsetEmail')}} I'd like to receive exclusive
															offers and news by Email
														</van-checkbox>
													</template>
												</van-field>
											</van-form>

										</div>
										<div class="forget">
											<!-- <span  style=""> Forget Password? </span> -->
										</div><button class="sign-in" @click="mbRegistration"> Sign
											Up </button>
										<div role="separator"
											class="van-divider van-divider--hairline van-divider--content-center"
											style="margin: 0.3rem 0px;">or</div>
										<div class="fb-signin-button">

											<fb-signin-button :params="fbSignInParams" @success="facebookSuccess"
												@error="facebookError">
												<button
													class="fbBtnBox van-button van-button--default van-button--normal"
													style="color: rgb(255, 255, 255); background: rgb(60, 90, 154); border-color: rgb(60, 90, 154);"><span
														class="van-button__text">
														<span class="fb-logo">

															<img src="../assets/image/home/facebook.png" alt=""></span>
													</span>
													<span class="fb-btnText">Facebook</span>
												</button>
											</fb-signin-button>
										</div>

										<g-signin-button :params="googleSignInParams" @success="googleLoginSuccess"
											@error="googleLoginError">
											<button
												class="gpBtnBox van-button van-button--default van-button--normal van-button--plain"
												style="color: rgb(255, 255, 255); border-color: rgb(255, 255, 255);"><span
													class="van-button__text">
													<span class="gp-logo">

														<img src="../assets/image/home/google.jpg" alt="">
													</span>
													<span class="gp-btnText">Google</span>
												</span>
											</button>
										</g-signin-button>
										<line-login-button :params='LineSignInParams' @success="lineLoginSuccess"
											@error='lineLoginError'>
											<van-button type="default" class="gpBtnBox"
												style="color: #FFFFFF; background: #00C300; ">
												<span class="fb-logo" style="top: 0;left: 4.8rem;">
													<img src="../assets/image/Line-logo.png" alt=""
														style="height: 1.9rem;">
												</span>
												<span class="fb-btnText" style="font-weight: 600;">
													Line
												</span>
											</van-button>
										</line-login-button>
										<div class="footer">
											<span>{{$t('login.tip1')}}</span><span
												class="light">{{$t('login.tip2')}}</span>
											<span>{{$t('login.tip6')}} {{$t('login.tip3')}}</span>
											<span class="light">{{$t('login.tip4')}} </span>
											<span>. {{$t('login.tip1')}}</span>
											<a href="https://policies.google.com/privacy" target="_blank" class="light">
												{{$t('login.tip5')}}</a>
											<span>{{$t('login.tip6')}}</span>
											<a href="https://policies.google.com/terms" target="_blank" class="light">
												{{$t('login.tip7')}} </a>
											<span>{{$t('login.tip8')}}</span>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>

						<div class="van-tabs__content">
							<div role="tabpanel" class="van-tab__pane" style=""></div>
							<div role="tabpanel" class="van-tab__pane" style="display: none;"></div>
						</div>


					</div>
				</div>
			</main>
		</div>

		<van-popup v-model="showBindingLineBox">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="showBindingLineBox = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx">
					{{$t('login.linetip1')}}
					<br>
					<span>{{$t('login.linetip2')}}</span>
					<div class="apply-body-btn" @click="changesignUp">{{$t('profile.SignUp')}}</div>
				</div>
			</div>
		</van-popup>

	</div>
</template>

<script>
	import queryString from 'querystring'
	import {
		googleSignInParams,
		fbSignInParams,
		LineSignInParams
	} from '@/config'

	import myfooter from '../components/my-footer/my-footer'
	import LineLoginButton from '@/components/LineLoginButton'
	export default {
		components: {
			myfooter,
			LineLoginButton,
		},
		name: "Login",
		data() {
			return {
				checkbox: false,
				checked: true,
				// pc端----------------
				form: {
					username: '',
					password: '',
				},
				// 忘记密码
				ForgotForm: {
					Forgot: '',
					newPassword: '',
					VerificationCode: ''
				},
				Forgotrules: {
					Forgot: [{
						type: 'email',
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Input Email' : '電子メールの入力',
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Input password' : 'パスワードの入力',
						trigger: 'blur'
					}],
					VerificationCode: [{
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Please input vertification code' :
							'認証コードを入力してください',
						trigger: 'blur'
					}],
				},
				// 表单验证，需要在 el-form-item 元素中增加 prop 属性
				rules: {
					username: [{
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Please input email' : 'メールを入力してください',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: this.$i18n.locale == 'en-US' ? 'Input password' : 'パスワードの入力',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 32,
							message: this.$i18n.locale == 'en-US' ? 'Password length cannot be less than six' :
								'パスワードの長さは6未満にする必要があります',
							trigger: 'blur'
						}
					],
				},
				// 对话框显示和隐藏
				dialogVisible: false,
				// 忘记密码框显示和隐藏
				changeDeletaIiShow: false,
				// 移动端--------------------------- 
				mbLoginForm: {
					username: '',
					password: '',
				},
				active: 0,
				mbRegistrationForm: {
					email: '',
					password: '',
					password_confirm: '',
					// emailCode: ''
				},
				imgNum: 0,
				// 美元提示表
				doctor: false,
				googleSignInParams: googleSignInParams,
				fbSignInParams: fbSignInParams,
				LineSignInParams: LineSignInParams,
				showBindingLineBox: false
			}
		},
		methods: {
			// 忘记密码框显示与删除
			changeIiShowTrue() {
				this.changeDeletaIiShow = true
			},
			// pc登录
			signChange() {
				console.log('点击登录')
				console.log(this.$refs.loginForm)
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						console.log('校验通过')
						this.$loading(0)
						this.userLoginHandler(this.form)
					} else {
						console.log('验证失败')
					}
				})
			},
			// 登录请求
			userLoginHandler(data) {
				this.$axios({
					url: 'user/auth/oauth',
					method: 'get',
					params: {
						...data,
						grant_type: 'password',
						scope: 'server',
					}
				}).then(res => {
					this.$store.commit('SET_TOKEN', res.access_token)
					this.getUserInfo(res.access_token)
					console.log(res)
				})
			},
			getUserInfo(token) {
				// token = 'd0d5f478-8ca7-91bb-9a7b-a6bc04b3fe7c' 
				this.$Toastclear()
				this.$axios({
					url: '/user/siteUser/info',
					headers: {
						'Authorization': 'Bearer ' + token
					}
				}).then(res => {
					console.log(res)
					if (res.data.status == 2) {
						this.showToast("The user is locked", "ユーザーはロックされています");
						this.$store.commit('SIGN_OUT')
						return;
					}
					this.$store.commit('SET_USERINFO', res.data)
					this.$store.commit('SET_ISLOGIN', true)
					this.showToast('Login success', 'ログイン成功', 'success')
					setTimeout(() => {
						this.$router.replace('/shop')
					}, 1500)
				})
			},
			// 手机登录
			mbSignChange() {
				this.$refs.mbRefLoginForm.validate().then(res => {
					this.userLoginHandler(this.mbLoginForm)
				})
			},
			// 手机注册
			mbRegistration() {
				this.$refs.mbRefRegistrationForm.validate().then(res => {
					this.$axios({
						url: '/user/siteUser/registered',
						method: 'post',
						data: {
							email: this.mbRegistrationForm.email,
							password: this.mbRegistrationForm.password,
							sourceUserId: window.localStorage.getItem('sourceUserId'),
						}
					}).then(res => {
						this.$tool.registerSuccess()
						this.userLoginHandler({
							username: this.mbRegistrationForm.email,
							password: this.mbRegistrationForm.password,
						})
					})
				})
			},
			// 点击切换成用户注册
			changesignUp() {
				if (document.documentElement.clientWidth < 900) {
					this.active = 1
				} else {
					this.$router.push("/signUp")
				}
			},

			// 移动端图标切换
			imgChnage(num) {
				if (this.imgNum === 0) {
					this.imgNum = 1
					this.$refs.inp01.type = 'text'
				} else {
					this.imgNum = 0
					this.$refs.inp01.type = 'password'
				}

			},
			titleChange01() {
				this.doctor = !this.doctor
			},
			// 忘记密码
			ForgotPasswordSubmit() {
				// console.log(this.$refs.yzmValue.value)
				let codeCommitValue = this.$refs.yzmValue.value.replace(/\s/gi, "");
				let passwardnew = this.$refs.passwardnew.value.replace(/\s/gi, "");
				let emailnew = this.$refs.emailnew.value.replace(/\s/gi, "");
				this.$axios({
					url: 'user/siteUser/retrievePassword',
					method: 'put',
					params: {
						email: emailnew,
						password: passwardnew,
						verificationCode: codeCommitValue
					}
				}).then(res => {
					this.changeDeletaIiShow = false
					this.$loading(0)
					this.showToast('Modified successfully', '修正成功', 'success')
					console.log(res)
				})
			},
			validator(val) {
				return val.length > 5
			},
			twoPassword(val) {
				return this.mbRegistrationForm.password == val
			},
			// 发送短信验证码
			sendEmailCode(email) {
				this.$refs.ForgotForm.validateField('Forgot', (flag) => {
					if (flag) {
						return this.showToast('please input correct email', '正しいメールを入力してください')
					} else {
						this.$axios({
							url: 'user/siteUser/getVerificationCode',
							method: 'post',
							params: {
								email,
								type: 1
							}
						}).then(res => {
							this.showToast('Has been sent', '送信済み')
							console.log(res)
						})
					}
				})
			},
			//google授权登录
			googleLoginSuccess(googleUser) {
				console.log('授权登录')
				console.log(this.$tool.initGoogleData(googleUser))
				let googleinfo = this.$tool.initGoogleData(googleUser)
				this.$loading(0)
				this.$axios({
					url: "user/siteUser/bindingSocialAccount",
					method: 'post',
					data: googleinfo
				}).then(res => {
						this.$tool.registerSuccess()
					this.userLoginHandler({
						username: googleinfo.email,
						password: googleinfo.email,
					})
				})
			},
			googleLoginError(error) {
				console.log(error)
			},
			// 脸书登录
			facebookSuccess(data) {
				this.$loading(0)
				this.$tool.initFaceBookData(data).then(facebookInfo => {
					this.$axios({
						url: "user/siteUser/bindingSocialAccount",
						method: 'post',
						data: facebookInfo
					}).then(res2 => {
						this.$Toastclear()
						this.$tool.registerSuccess()
						this.userLoginHandler({
							username: facebookInfo.email,
							password: facebookInfo.email,
						})
					})
				})
			},
			facebookError(err) {
				console.log(err)
			},
			// Line登录
			IsLineLogin() {
				// 判断是否是Line跳转过来的 
				const {
					code
				} = queryString.parse(window.location.search.replace('?', ''))
				if (!code) return
				this.$loading(0)
				this.$refs.LineLoginButton.getToken(code)
			},
			lineLoginSuccess(LineInfo) {
				console.log(LineInfo)
				if (!LineInfo.email) {
					this.$Toastclear()
					this.showBindingLineBox = true
					return
				}
				this.$axios({
					url: "user/siteUser/bindingSocialAccount",
					method: "post",
					data: LineInfo
				}).then(res => {
						this.$tool.registerSuccess()
					this.userLoginHandler({
						username: LineInfo.email,
						password: LineInfo.email,
					})
				})
			},
			lineLoginError(err) {
				console.log(err)
			}
		},
		created() {
			let type = this.$route.query.type;
			this.active = type * 1
		},
		mounted() {
			this.IsLineLogin()
		},
		computed: {}

	}
</script>

<style scoped lang="scss">
	.van-form-item {
		padding: 0.4rem 0.8rem;
		border: 0.05rem solid #ddd;
		background: #fafafa;
		border-radius: 0.2rem;

		.van-icon {
			color: #969799;
		}
	}

	@media only screen and (max-width: 900px) {
		.user_sing_pc {
			display: none;
			overflow: hidden;
		}
	}

	@media only screen and (min-width: 900px) {
		.user_sing_iphone {
			display: none;
		}

		html {
			font-size: 30px;
		}
	}

	// vant
	/deep/.van-tabs__line {
		position: absolute;
		bottom: 15px;
		left: 0;
		z-index: 1;
		width: 8.4rem;
		height: 3px;
		background-color: #ee0a24;
		border-radius: 3px;
	}

	// pc端

	/deep/.el-input__inner:focus {
		border: 1px solid orangered;
	}

	.sendPass {
		height: 40px;
		min-width: 131px;
		border: 0.05rem solid #b5b5b5;
		display: inline-block;
		position: absolute;
		left: 188px;
		top: 0px;
		text-align: center;
		font-size: 12px;
		color: #b5b5b5;
	}

	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	.clearfix {
		height: 1%;
	}

	#mainPage {
		// height: 554px;
		overflow-y: auto;
	}

	.mainPage_pc_main_194P4 {
		flex: 1;
		overflow-y: scroll;
		background: #f5f5f5;
		height: 100%;
	}

	.login {
		box-sizing: border-box;
	}

	.login-content {
		width: 950px;
		margin: 80px auto;
	}

	.sign-content {
		width: 950px;
		margin: 80px auto;
	}

	.login-content-form {
		width: 450px;
		padding-left: 50px;
	}

	.pull-right {
		float: right !important;
		box-sizing: border-box;
	}

	.pull-left {
		float: left !important;
	}

	.login-content-form-title {
		color: #ff5900;
		margin-bottom: 20px;
		font-size: 35px;
		font-weight: 700;
	}

	.van-button::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background-color: #000;
		border: inherit;
		border-color: #000;
		border-radius: inherit;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		opacity: 0;
		content: " ";
	}

	.van-button--normal {
		padding: 0 15px;
		font-size: 14px;
	}

	.van-button--default {
		color: #323233;
		background-color: #fff;
		border: 1px solid #ebedf0;
	}

	.login-content .fb-logo {
		position: absolute;
		left: 1rem;
		top: 0.3rem;
	}

	.small {
		margin: 15px 0px;
	}

	.line-wrapper {
		margin: 10px 0;
		display: flex;
	}

	.line {
		float: left;
		flex: 1;
		border-top: 1px dashed #b8b8b8;
		margin-top: 8px;
	}

	.login-content .line-wrapper .line-or {
		text-align: center;
		font-size: 0.7rem;
		color: #757575;
		margin: 0 20px;
	}

	.input_log {
		width: 100%;
		height: 40px;
		border-radius: 4px;
		margin-bottom: 22px;
		border-color: #c0c4cc;
	}

	.el-input:focus {
		border: 1px solid red;
	}

	.input_pass {
		width: 100%;
		height: 40px;
		border-radius: 4px;
		margin-bottom: 22px;
		border-color: #c0c4cc;
	}

	.submit-btn {
		width: 400px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
		color: #fff;
		background-color: #ff5900;
		font-size: 24px;
		margin-top: 25px;
		/* text-align: left; */
	}

	.forget {
		font-size: 16px;
		margin-top: 15px;
		color: #ff5900 !important;
		color: #333;
		text-align: left;
	}

	.join-in {
		margin-top: 15px;
		font-size: 16px;
		color: #333;
		text-align: left;
	}

	/* .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  } */

	.login-title {
		text-align: center;
		margin: 0 auto 40px auto;
		color: #303133;
	}

	.dialogVisible {
		display: block;
	}

	/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #ff5900 !important;
	}

	/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #ff5900 !important;
		border-color: #ff5900 !important;
	}

	/deep/.el-casca der .el-input .el-input__inner:focus,
	.el-cascader .el-input.is-focus .el-input__inner {
		border-color: #ded1cf;
		border: 1px solid red;
	}

	.form_a:hover {
		text-decoration: underline;
		color: #ff5900;
	}

	.pc-dialog-slot {
		width: 350px;
		border-radius: 5px;
		background-color: #fff;
	}

	.pc-dialog-slot .delete-icon {
		position: relative;
		height: 35px;
		background-color: #ff5900;
	}

	.pc-dialog-slot .delete-icon>i {
		position: absolute;
		right: 10px;
		top: 10px;
		display: block;
		width: 15px;
		height: 15px;
		background-color: #fff;
		border-radius: 50%;
		text-align: center;
		background: url(https://www.rebatest.com/pingjiayi/App/image/2_03-375.png) 0 0 no-repeat;
		background-size: cover;
	}

	.pc-dialog-slot .dialog-content {
		padding: 0.75rem;
		font-size: 14px;
		color: #575757;
		text-align: center;
	}

	.color-yellow {
		color: #ffaf52;
	}

	.forget-pass p {
		text-align: center;
		font-size: 0.75rem;
		line-height: 1.5;
	}

	.forget-pass .forget-btn {
		display: block;
		width: 170px;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.7rem;
		color: #fff;
		text-align: center;
		border: none;
		margin: 3rem auto 0;
	}

	.bg-yellow {
		background-color: #ffaf52;
	}

	.van-popup--center {
		border-radius: 0.3rem;
	}

	.van-popup--center {
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
	}

	.van-popup {
		position: fixed;
		max-height: 100%;
		overflow-y: auto;
		background-color: #fff;
		-webkit-transition: -webkit-transform 0.3s ease-out;
		transition: -webkit-transform 0.3s ease-out;
		transition: transform 0.3s ease-out;
		transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
		-webkit-overflow-scrolling: touch;
	}

	/deep/#el-form-forgot .el-input__inner {
		width: 100%;
		border: 0.05rem solid #b5b5b5;
		padding: 0.2rem 0.6rem;
		margin-bottom: 0.4rem;
		font-size: 0.7rem;
		color: #000;
		box-sizing: border-box;
		// background-color:rgb(232, 240, 254);
		border-radius: 0px;
		height: 30px;
	}

	/deep/#last-white {
		background-color: white !important;
		color: orangered;
	}

	/deep/.el-input__inner::placeholder {
		// color: orangered;
		text-align: center;
		text-align: left;
	}

	.van-overlay {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
	}

	// 移动端
	.login-body {
		padding: 1rem;

		.logo {
			margin-top: 1rem;
			height: 3.25rem;
			text-align: center;
		}

		.logo img {
			height: 1.45rem;
		}

		.van-tabs {
			position: relative;
		}

		.van-tabs__wrap {
			height: 44px;
		}

		.van-tabs__wrap {
			overflow: hidden;
		}

		.van-tabs__nav--line {
			box-sizing: content-box;
			height: 100%;
			padding-bottom: 15px;
		}

		.van-tab--active {
			font-weight: 700;
		}

		.van-tab {
			font-size: 0.9rem !important;
		}

		.van-tab--active {
			color: #323233;
			font-weight: 500;
		}

		.van-tab {
			position: relative;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			box-sizing: border-box;
			min-width: 0;
			padding: 0 5px;
			color: #646566;
			font-size: 14px;
			line-height: 44px;
			text-align: center;
			cursor: pointer;
		}

		.van-ellipsis {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.van-tab__text {
			position: relative;
		}

		.van-tab {
			font-size: 0.9rem !important;
		}

		.van-tab {
			position: relative;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			box-sizing: border-box;
			min-width: 0;
			padding: 0 5px;
			color: #646566;
			font-size: 14px;
			line-height: 44px;
			text-align: center;
			cursor: pointer;
		}

		.container {
			position: relative;
			height: 80%;
		}

		.login-form {
			margin-top: 1rem;
		}

		.error-msg {
			margin-bottom: 0.4rem;
			height: 0.56rem;
			line-height: 0.56rem;
		}

		.error-msg span span {
			color: #ee0a24;
			font-size: 0.6rem;
		}

		.van-form {
			.login-field {
				padding: 0.4rem 0.8rem;
				border: 0.05rem solid #ddd;
				background: #fafafa;
				border-radius: 0.2rem;
			}
		}

		.mb-rem08 {
			margin-bottom: 0.8rem;
		}

		.van-cell {
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 16px;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
		}

		.van-field__left-icon {
			margin-right: 0.4rem;
		}

		.van-icon01 {
			display: block;
			min-width: 1em;
			font-size: 16px;
			line-height: inherit;
		}

		.van-icon01 {
			position: relative;
			font: normal normal normal 14px/1 vant-icon;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
		}

		.van-icon01__image {
			height: 1rem;
			width: 1rem;
		}

		.van-field__value {
			overflow: visible;
		}

		.van-cell__value--alone {
			color: #323233;
			text-align: left;
		}

		.van-cell__value {
			position: relative;
			overflow: hidden;
			color: #969799;
			text-align: right;
			vertical-align: middle;
			word-wrap: break-word;
		}

		.check-field {
			padding-left: 0;
			margin-bottom: 0.25rem;
		}

		.van-cell {
			padding: 5px 0;
		}

		.forget {
			margin-bottom: 1rem;
			height: 0.56rem;
			line-height: 0.56rem;
			text-align: right;
		}

		.forget span {
			font-size: 0.56rem;
			color: #444;
		}

		.sign-in {
			margin-top: 0.8rem;
			display: block;
			width: 100%;
			height: 2rem;
			line-height: 2rem;
			background-color: #ff5900;
			color: #fff;
			box-sizing: border-box;
			text-align: center;
			border-radius: 0.2rem;
			font-size: 0.7rem;
			border: none;
			font-weight: 700;
		}

		.van-divider {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			margin: 16px 0;
			color: #969799;
			font-size: 14px;
			line-height: 24px;
			border-color: #ebedf0;
			border-style: solid;
			border-width: 0;
		}

		.fbBtnBox {
			width: 100%;
			height: 2rem;
			line-height: 2rem;
			border-radius: 0.2rem;
			font-size: 0;
			position: relative;
		}

		.van-button--normal {
			padding: 0 15px;
			font-size: 14px;
		}

		.van-button--default {
			color: #323233;
			background-color: #fff;
			border: 1px solid #ebedf0;
		}

		.fb-logo {
			position: absolute;
			left: 5.2rem;
			top: 0.4rem;
		}

		.fb-logo img {
			height: 1.05rem;
			line-height: 1.05rem;
			margin-bottom: 0.2rem;
		}

		.gpBtnBox {
			background: #fff;
			box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
			opacity: 1;
			width: 100%;
			height: 2rem;
			line-height: 2rem;
			margin-top: 0.8rem;
			border-radius: 0.2rem;
			font-size: 0;
			position: relative;
		}

		.van-button--normal {
			padding: 0 15px;
			font-size: 14px;
		}

		.van-button:before {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			background-color: #000;
			border: inherit;
			border-color: #000;
			border-radius: inherit;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			opacity: 0;
			content: " ";
		}

		.gp-logo {
			position: absolute;
			left: 5.2rem;
			top: 0.4rem;
		}

		.gp-logo img {
			height: 1.05rem;
		}

		.gp-btnText {
			color: #747474;
			height: 1.8rem;
			line-height: 1.8rem;
			display: inline-block;
			vertical-align: middle;
			font-size: 0.7rem;
			font-weight: 700;
		}
		.fb-btnText{
			font-size: 0.7rem;
			font-weight: 700;
			height: 1.8rem;
			line-height: 1.8rem;
			display: inline-block;
			vertical-align: middle;
		}
		.footer {
			margin-top: 7rem;
			text-align: center;
			width: 100%;
			position: relative;
			bottom: 1rem;
			left: 0;
			font-size: 0.5rem;
			color: #999;
		}

		.light {
			color: #ff5900;
		}

		.van-icon01 img {
			position: relative;
			top: 0.2rem;
		}

		/deep/.van-checkbox__label span {
			color: #b5b5b5; 
			font-size: 12px;
		}

		.van-checkbox__label {
			// line-height: 1rem;
			line-height: 10px !important;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/deep/.van-tab__text {
			font-size: 0.8rem;
		}

		/deep/.van-tab--active {
			font-weight: 800;
			// color: red;
		}

		.sub-title img {
			width: 0.8rem;
			height: 0.8rem;
			vertical-align: middle;
		}

		.sub-title span {
			font-size: 0.65rem;
			line-height: 0.65rem;
			font-weight: 700;
			margin-left: 0.3rem;
			vertical-align: middle;
		}

		/deep/.van-checkbox__icon {
			border: 0.1rem solid rgb(214, 214, 214);
		}

		/deep/.van-checkbox__icon--checked {
			color: #fff;
			background-color: orangered;
			border-color: orangered;
			// border: 1px solid orangered;
		}

		/deep/ .van-icon {
			color: #fff;
			// /* background-color: #1989fa; */
			border-color: transparent;
		}
	}

	.apply-body-btn {
		width: 14rem;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		margin: 1rem auto;
		color: #fff;
		background-color: #ff5900;
	}

	.commonDialogSlot_deletBox_1Tm2F .commonDialogSlot_content_1izEx {
		padding: 0.75rem 0.75rem 0.75rem 0.75rem;
		font-size: 0.775rem;
		color: #404040;
		text-align: center;
		line-height: 1rem;
	}

	.commonDialogSlot_deletBox_1Tm2F {
		border-radius: 0.3rem;
		background: rgb(255, 255, 255);
		width: 540px;
		height: 20%;

		@media only screen and (max-width: 900px) {
			width: 16rem;
		}
	}

	.commonDialogSlot_deletBox_1Tm2F .commonDialogSlot_deletIconBox_2ErC {
		height: 1.8rem;
		background: #ff5900;
		position: relative;
	}

	.commonDialogSlot_deletBox_1Tm2F .commonDialogSlot_deletIconBox_2ErC i {
		position: absolute;
		width: 1.3rem;
		height: 1.3rem;
		display: block;
		right: 0.35rem;
		top: 50%;
		margin-top: -0.65rem;
		background-color: #fff;
		background: url(https://www.rebatest.com/pingjiayi/App/image/2_03-375.png) 0 0 no-repeat;
		background-size: 1.3rem 1.3rem;
	}
</style>
